<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div class="demo-input-size">

        <el-input size="medium" placeholder="请输入部门" style="display: inline-block;width: 200px;"
                  v-model="searchInfo.dname">
        </el-input>

        <el-button type="primary" @click="deptSearch()">查询信息</el-button>
        <el-button type="success" @click="addDept()">添加信息</el-button>
        <el-button type="primary" plain  @click="exportDept()">导出信息</el-button>

        <a href="/ssm/dept/temp.xlsx">下载模板</a>
        <form  id="deptForm" >
            <input type="file"  name="hehe">
        </form>
        <el-button type="danger" plain  @click="importDept()">导入信息</el-button>




        <el-table :data="deptArr" border style="width: 100%">
            <el-table-column prop="id" label="编号">
            </el-table-column>
            <el-table-column prop="dname" label="部门">
            </el-table-column>
            <el-table-column prop="state" label="状态" width="150" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.state== 0">
                 <div class="state-icon icon0"></div>启动
             </span>
             <span v-if="scope.row.state== 1">
                 <div class="state-icon icon1"></div>冻结
             </span>
                    <span v-if="scope.row.state== 2">
                 <div class="state-icon icon2"></div>禁用
             </span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="warning" @click="getDept(scope.row.id)">修改</el-button>
                    <el-button type="danger" @click="deleteDept(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="totalCount">
        </el-pagination>

        <el-dialog title="添加操作" :visible.sync="dialogFormVisible">
            <el-form :model="Department" :rules="rules" ref="Department">
                <el-form-item label="部门" prop="dname">
                    <el-input v-model="Department.dname"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="state">
                    <el-select v-model="Department.state" placeholder="请选择状态">
                        <el-option label="0：开启" value="0"></el-option>
                        <el-option label="1：冻结" value="1"></el-option>
                        <el-option label="2：禁用" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="deptAdd()">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改操作" :visible.sync="updatedialogFormVisible">
            <el-form :model="Department" :rules="rules" ref="Department">
                <el-form-item label="部门" prop="username">
                    <el-input v-model="Department.dname"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="state">
                    <el-select v-model="Department.state" placeholder="请选择状态">
                        <el-option label="0：开启" value="0"></el-option>
                        <el-option label="1：冻结" value="1"></el-option>
                        <el-option label="2：禁用" value="2"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updatedialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateDept()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</div>
<script>
    var haha = new Vue({
        el: "#app",
        data: {
            searchInfo: {},
            deptArr: [],
            totalCount: 0,
            dialogFormVisible: false,
            updatedialogFormVisible:false,
            Department: {},
            rules: {
                dname: [{
                    required: true,
                    message: '请输入部门',
                    trigger: 'blur'
                },
                    {
                        min: 1,
                        max: 7,
                        message: '长度在1到7个字符',
                        trigger: 'blur'
                    }

                ],
                state: [{
                    required: true,
                    message: '请输入状态',
                    trigger: 'blur'
                },
                    {
                        min: 1,
                        max: 2,
                        message: '长度在1到2个字符',
                        trigger: 'blur'
                    }

                ],
            }
        },
        methods: {
            importDept(){
                //1 文件流读取
                var deptData =  new FormData(deptForm);

                // 2 发送到后台
                $.ajax({
                    url:"/ssm/deptsource/upload",
                    type:"POST",
                    data:deptData,
                    processData:false,
                    contentType:false,
                    success:function(backData){
                    }
                });

            },
            exportDept() {
                window.location.href = "/ssm/deptsource/download?name=" + haha.searchInfo.dname + "&pageNo=1&pageCount=100";
            },
            updateDept(){
                $.post("/ssm/dept/update",haha.Department,function (backData) {
                    if (backData.code == 1) {
                        haha.updatedialogFormVisible = false;
                        haha.$refs["Department"].resetFields();
                        haha.$message.success('恭喜你修改成功');
                        getData(1,10)
                    } else {
                        haha.$message.error('错了哦，这是一条错误消息');
                    }
                })
            },
            getDept(id){
                $.get("/ssm/dept/get/"+id,function (backData) {
                    haha.Department = backData.data;
                    haha.updatedialogFormVisible = true;
                })
            },
            deleteDept(id){
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/ssm/dept/delete/" + id, function (backData) {
                        haha.$message.success(backData.msg);
                        getData(1,10)
                    });
                })
            },
            deptAdd(){
                haha.$refs["Department"].validate((valid) => {
                    if (valid) {
                        $.post("/ssm/dept/add",haha.Department,function (backData) {
                            if (backData.code == 1) {
                                haha.dialogFormVisible = false;
                                haha.$refs["Department"].resetFields();
                                haha.$message.success('恭喜你添加成功');
                                getData(1,10)
                            } else {
                                haha.$message.error('错了哦，这是一条错误消息');
                            }
                        });
                    }
                });

            },
            addDept() {
                haha.dialogFormVisible = true;
            },
            deptSearch(){
                getData(1,10)
            },
            handleCurrentChange(val) {
                getData(val,10)
            }
        }
    });

    function getData(a, b) {
        haha.searchInfo.pageNo = a;
        haha.searchInfo.pageCount = b;
        $.post("/ssm/dept/query", haha.searchInfo, function (backData) {
            haha.deptArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
        });
    }
    getData(1, 10);
</script>
</body>
</html>
